<template>
  <div>
    <TopNav title="个人中心" />
    <div class="profile" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt=""
        class="userPic"
      />
      <img v-else src="@/assets/default.png" alt="" class="userPic" />
      <div class="Info">
        <div class="name">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: userInfo.gender === 1,
              iconxingbienv: userInfo.gender === 0,
            }"
          ></span>
          {{ userInfo.nickname || userInfo.username }}
        </div>
        <div class="date">2019-11-20</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>

    <ProfileBar
      label="我的关注"
      desc="关注的用户"
      @click.native="$router.push('/follow')"
    />
    <ProfileBar label="我的跟帖" desc="跟帖/回复" />
    <ProfileBar
      label="我的收藏"
      desc="文章/视频"
      @click.native="$router.push('/profilestar')"
    />
    <ProfileBar label="设置" @click.native="$router.push('/edit')" />
    <ProfileBar label="退出" @click.native="logOut" />
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import ProfileBar from "@/components/ProfileBar";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  components: {
    ProfileBar,
    TopNav,
  },
  created() {
    // console.log(localStorage.getItem("token"));
    // 页面创建完，通过token获取数据
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
    }).then((res) => {
      //   console.log(res);
      // 把data里的数据赋值到上面的data上以便使用
      const { data, message } = res.data;
      if (message == "获取成功") {
        this.userInfo = data;
        // console.log(this.userInfo);
      }
    });
  },
  methods: {
    logOut() {
      localStorage.clear();
      this.$toast("退出成功");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
  padding: 26/360 * 100vw 20/360 * 100vw;
  border-bottom: 5/360 * 100vw solid #e4e4e4;
  .userPic {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
  }
  .Info {
    flex-grow: 1;
    padding-left: 14/360 * 100vw;
    .name {
      font-size: 16/360 * 100vw;
      color: #333;
      .iconxingbienan {
        color: #72b2e1;
      }
      .iconxingbienv {
        color: #e949ba;
      }
    }
    .date {
      font-size: 14/360 * 100vw;
      color: #d3d3d3;
    }
  }
}
</style>